<template>
  <el-dialog :title="title" :visible.sync="visible" :before-close="closeHandler">
    <el-form :model="form" ref="form" :rules="rules" :disabled="view">
      <el-row>
        <el-col :md="11">
          <el-form-item v-if="this.primaryKey !== undefined" label="用户名" :label-width="formLabelWidth">
            <span>{{ form.username }}</span>
          </el-form-item>
          <el-form-item v-else label="用户名" prop="username" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="11">
          <el-form-item v-if="this.primaryKey !== undefined" label="密码" :label-width="formLabelWidth">
            <span>***********</span>
          </el-form-item>
          <el-form-item v-else label="密码" prop="password" :label-width="formLabelWidth">
            <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="11">
          <el-form-item label="昵称" prop="nickname" :label-width="formLabelWidth">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="11">
          <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="11">
          <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="11">
          <el-form-item label="岗位" prop="post" :label-width="formLabelWidth">
            <el-input v-model="form.post" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="11">
          <el-form-item label="部门" prop="deptId" :label-width="formLabelWidth">
            <el-input v-model="form.deptId" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="11">
          <el-form-item label="角色" prop="roleIds" :label-width="formLabelWidth">
            <el-select v-model="form.roleIds" multiple >
              <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelHandler">取 消</el-button>
      <el-button type="primary" @click="okHandler" v-if="!view"  >保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import formValid from "@/utils/validate.form"
import { getDetails,saveData,updateData } from '@/api/system/user'
import { getList as roleList } from '@/api/system/role/index'

export default {
  name: "edit",
  props: {
    primaryKey: {
      type: Number,
      default: undefined
    },
    title: {
      type: String,
      require: true
    },
    callback: {
      type: Function
    },
    view: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      form: {
        id: undefined,
        username: undefined,
        password: undefined,
        nickname: undefined,
        phone: undefined,
        email:undefined,
        post: undefined,
        deptId: undefined,
        roleIds: undefined
      },
      rules: {
        username: [
          {required: true, message: "用户名不能为空", trigger: 'blur'},
          {validator: formValid.validUsername(), trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: "昵称不能为空", trigger: 'blur'}
        ],
        password: [
          {required: true, message: "密码不能为空", trigger: 'blur'},
          {validator: formValid.validPassword(), trigger: 'blur'}
        ],
        email: [
          {validator: formValid.validEmail(), trigger: 'blur'}
        ],
        phone: [
          {validator: formValid.validMobile(), trigger: 'blur'}
        ],
      },
      formLabelWidth: '110px',
      isModify:false,
      roleList:[]
    };
  },
  created() {
    this.queryRoleList();
    this.queryDetails();
  },
  methods: {
    closeHandler() {
      if (this.view || this.formEmpty()) {
        this.cancelHandler();
        return;
      }
      this.$confirm('确认关闭？')
          .then(() => {
            this.cancelHandler();
          })
          .catch(() => {
          });
    },
    cancelHandler() {
      this.closeDialog()
    },
    okHandler() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.form.id === undefined){
            saveData(this.form).then(rsp => {
              if(rsp.status === "1"){
                this.isModify = true;
                this.closeDialog();
              }
            })
          }else{
            updateData(this.form).then(rsp => {
              if(rsp.status === "1"){
                this.isModify = true;
                this.closeDialog();
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.visible = false;
      let that = this;
      setTimeout(() => {
        that.callback(that.isModify);
      }, 100)

    },
    fillFormData(data) {
      for (let key in this.form) {
        this.$set(this.form, key, data[key]);
      }
    },
    formEmpty() {
      for (let key in this.form) {
        let val = this.form[key];
        if (val !== undefined) {
          return false;
        }
      }
      return true;
    },
    queryDetails() {
      if (this.primaryKey !== undefined) {
        getDetails(this.primaryKey).then(response => {
          this.fillFormData(response.data);
          this.visible = true;
        }).catch(() => {
          this.$message.error("获取信息失败!");
          this.cancelHandler();
        })
      } else {
        this.visible = true;
      }
    },
    queryRoleList(){
      roleList().then(rsp=>{
        this.roleList = rsp.data;
      })
    }
  }
};
</script>